<template>
  <div>
    <div class="learun-footer">
      <div
        :class="['learun-footer__btn', { isOpened: isMenuOpened }]"
        @click.stop="openMenus"
      >
        <div><i class="learun-icon-classify" /></div>
        <div class="learun-footer__btn-text" >{{$t('菜单')}}</div>
      </div>
    </div>
    <div
      v-if="isMenuOpened"
      class="learun-footer__menu-mask"
      @click.stop="closeMenu"
    ></div>
    <div :class="['learun-footer__menu_panel', { isOpened: isMenuOpened }]">
      <div class="learun-footer__menu">
        <my-menu @openMenu="closeMenu" onlyFirstMenu />
      </div>

      <div class="learun-footer__sub_menu">
        <my-menu @openMenu="closeMenu" :level="2" type="light" />
      </div>
    </div>
  </div>
</template>

<script>
import MyMenu from "../menu/menu";

export default {
  components: { MyMenu },
  data() {
    return {
      isMenuOpened: false,
    };
  },
  computed: {},
  methods: {
    openMenus() {
      this.isMenuOpened = !this.isMenuOpened;
    },
    closeMenu() {
      this.isMenuOpened = false;
    },
  },
};
</script>


